import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

// 全局的获取焦点自定义指令
Vue.directive('focus', {
  // 只会在绑定该指令的元素被插入到页面时 触发一次
  inserted(el) {
    // console.log('inserted执行了');
    el.focus();
  },
  // 所在组件的 VNode 更新时调用
  // 第三个参数：虚拟DOM节点
  // update(el, binding, vnode) {
  //   // console.log('update执行了');
  //   console.log('el.style.display:', el.style.display);

  //   // 如何在钩子获取组件实例呢？只要能获取到组件实例，就能调用 实例.$nextTick()
  //   // this   ???  $nextTick()

  //   // vnode.context 当前上下文（所在的组件实例）
  //   vnode.context.$nextTick(() => {
  //     el.focus();
  //   });
  // },

  // 组件更新后
  componentUpdated(el) {
    // console.log('el.style.display:', el.style.display);
    el.focus();
  },
});

new Vue({
  render: h => h(App),
}).$mount('#app');
